<template>
    <div class="user">
        <panel @add="addUser" @search="search($event)"></panel>
        <msgList :msgList="msgList" class="list" @change="change($event); dialogFormVisible = true" @del="del"></msgList>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="Number(page_num)"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
            class="pagination"
            
        ></el-pagination>
        <msgUpdate
            :dialogFormVisible="dialogFormVisible"
            @closeDialog="dialogFormVisible = false"
            :toChangeRow="toChangeRow"
            @refresh="refresh"
        ></msgUpdate>
        <msgAdd
            :dialogFormVisible="showAddDialog"
            @closeDialog="showAddDialog=false"
            @refresh="refresh"
            :addTemp="{...addTemp}"
        ></msgAdd>
    </div>
</template>

<script>
import msgList from "@/components/message/msgList";
import panel from "@/components/panel";
import msgUpdate from "@/components/message/msgUpdate";
import msgAdd from "../../components/message/msgAdd";
export default {
    name: "Message",
    data() {
        return {
            msgList: [],
            page_now: undefined,
            total: undefined,
            page_num: undefined,
            currentPage:1,
            toChangeIndex: undefined,
            dialogFormVisible: false,
            toChangeRow: null,
            searchVal: "",
            showAddDialog: false,
            addTemp: {
                user_id: "",
                content: ""
            }
        };
    },
    components: {
        msgList,
        panel,
        msgUpdate,
        msgAdd
    },
    methods: {
        addUser: function() {
            this.showAddDialog = true;
        },
        search: async function(val) {
            // alert(val);
            // /ycwAdmin/user/getUserList?key=12345;
            this.searchVal = val;
            let data = await this._axios
                .get(`/ycwAdmin/msg/get?page=1&num=10&key=${val}`)
                .then(data => data.data.data);
            console.log(data);
            this.page_now = data.page_now;
            this.total = data.page_total * data.page_num;
            this.msgList = data.data;
            this.page_num = data.page_num;
        },
        handleCurrentChange: async function(val) {
            if (this.searchVal == "") {
                let data = await this._axios
                    .get(`/ycwAdmin/msg/get?page=${val}&num=10`)
                    .then(data => data.data.data);
                this.msgList = data.data;
            }else{
                let data = await this._axios
                    .get(`/ycwAdmin/msg/get?page=${val}&num=10&key=${this.searchVal}`)
                    .then(data => data.data.data);
                this.msgList = data.data;
            }
        },
        del: async function(row) {
            let data = await this._axios
                .get("/ycwAdmin/msg/del?id=" + row.id)
                .then(data => data.data);
            console.log(data);
            if (data) {
                this.$alert(`${data.msg}`, {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.$message({
                            type: "warning",
                            message: `${data.msg}`
                        });
                        this.refresh();
                    }
                });
            }
        },
        change: function(index) {
            console.log(index);
            this.toChangeRow = { status: this.msgList[index].status };
        },
        refresh: async function() {
            let data = await this._axios
                .get("/ycwAdmin/msg/get?page=1&num=10")
                .then(data => data.data.data);
            console.log(data);
            this.page_now = data.page_now;
            this.total = data.page_total * data.page_num;
            this.msgList = data.data;
            this.page_num = data.page_num;
            this.currentPage=1;
        }
    },
    mounted: async function() {
        this.refresh();
    }
};
</script>

<style lang="scss" scoped>
.pagination {
    margin-top: 10px;
}
</style>